<template>
  <div class="container">
    <div style="width: 100%; height: auto">
      <van-row
        type="flex"
        justify="space-around"
        align="center"
        style="padding: 0px 8px"
      >
        <van-col style="width: 100%">
          <van-search
            v-model="searchvalue"
            placeholder="请输入姓名或手机号"
            shape="round"
            @input="onSearch"
          ></van-search>
        </van-col>
        <van-col>
          <div class="publish">
            <div @click="$router.push('/verify/user')">添加客户</div>
          </div>
        </van-col>
      </van-row>
      <!-- 客户分类模块 -->
      <van-row class="user_classification_box">
        <!-- 新的客户 -->
        <van-col @click="navigationTo(0)">
          <div
            style="background-color: rgba(39, 105, 242, 0.81)"
            class="icon_box"
          >
            <img
              src="@/assets/images/new_user.png"
              style="width: 28px; height: 28px"
              alt
            />
          </div>
          <span>客户浏览足迹</span>
        </van-col>
        <!-- 转介绍客户 -->
        <van-col @click="navigationTo(1)">
          <div
            class="icon_box"
            style="background-color: rgba(51, 193, 52, 0.82)"
          >
            <img
              src="@/assets/images/introduce_user.png"
              style="width: 28px; height: 28px"
              alt
            />
          </div>
          <span>转入客户</span>
        </van-col>

        <!-- <slot
          v-if="position.includes(userInfo.positionId + '') && userLevel == 2"
        >
          <van-col @click="cesNavigationTo">
            <div class="icon_box" style="background-color: #deb927">
              <img
                src="@/assets/images/callphone.png"
                style="width: 28px; height: 28px"
                alt
              />
            </div>
            <span>需“验证”客户</span>
          </van-col>
        </slot>
        <slot v-else>
          <van-col>
            <div class="icon_box" style="background-color: #deb927">
              <img
                src="@/assets/images/callphone.png"
                style="width: 28px; height: 28px"
                alt
              />
            </div>
            <span>需“验证”客户</span>
          </van-col>
        </slot> -->
        <van-col>
          <div class="icon_box" style="background-color: #f86747">
            <img
              src="@/assets/images/yanzheng.png"
              style="width: 28px; height: 28px"
              alt
            />
          </div>
          <span>手机绑定并关注人数：{{ total }}</span>
        </van-col>

        <van-col @click="followtionTo(1)">
          <div class="icon_box" style="background-color: #deb927">
            <img
              src="@/assets/images/yanzheng.png"
              style="width: 28px; height: 28px"
              alt
            />
          </div>
          <span>“已关注”人数</span>
        </van-col>
        <van-col @click="followtionTo(2)">
          <div class="icon_box" style="background-color: #deb927">
            <img
              src="@/assets/images/yanzheng.png"
              style="width: 28px; height: 28px"
              alt
            />
          </div>
          <span>“未关注”人数</span>
        </van-col>
        <van-col @click="followtionTo(0)">
          <div class="icon_box" style="background-color: #deb927">
            <img
              src="@/assets/images/yanzheng.png"
              style="width: 28px; height: 28px"
              alt
            />
          </div>
          <span>“取关”人数</span>
        </van-col>
      </van-row>
    </div>
    <van-list
      :immediate-check="true"
      v-model="loading"
      :finished="finished"
      @load="onLoad"
    >
      <van-index-bar class="ss">
        <div v-for="(element, index) in pinYinData" :key="index">
          <van-index-anchor :index="getIndex(element)" />
          <van-row
            class="box_z"
            v-for="item in getDataList(element, index)"
            :key="item.id"
            @click="handlePushDetails(item.id)"
          >
            <!-- :class="addClass(item.isTop)" -->
            <van-col class="item" style="width: 50px">
              <img
                :src="item.avatar || avatar_default"
                class="img-radius"
                height="50px"
                width="50px"
              />
            </van-col>
            <van-col
              class="item"
              style="
                border-bottom: 1px solid #ededed;
                width: calc(100% - 58px);
                margin-left: 8px;
              "
            >
              <van-row
                class="box_big_info"
                style="width: 100%"
                @touchstart="gtouchstart(item)"
                @touchmove="gtouchmove()"
                @touchend="gtouchend(item)"
              >
                <van-col class="box_r">
                  <span
                    style="
                      font-size: 16px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                    >{{ item.name }}</span
                  >

                  <!-- <span
                  style="color:red;font-size: 14px;width: 60px; text-align:right; padding-right:3px"
                  v-if="item.status == 0"
                >未验证</span>-->
                </van-col>
              </van-row>
            </van-col>
          </van-row>
        </div>
      </van-index-bar>
    </van-list>
    <div class="num_footer">共{{ total }}位客户</div>
  </div>
</template>
<script>
import {
  Search,
  List,
  Row,
  Col,
  Image,
  Dialog,
  Toast,
  IndexBar,
  IndexAnchor,
} from 'vant';
import {
  customersList,
  customersList_invite,
  setTop,
  authInfo,
  customersListType,
} from '@/api/api';
import avatar_default from '@/assets/images/avatar_default.png';
import { getLocalStorage } from '@/utils/local-storage';
import pinYin from 'pinyin';

export default {
  name: 'business-customers',

  data() {
    return {
      memberLevel: 0,
      userLevel: 0,
      searchvalue: '',
      total: 0,
      userId: getLocalStorage('userId').userId,
      list: [],
      loading: false,
      error: false,
      finished: false,
      avatar_default: avatar_default,
      isTop: 2,
      timeOutEvent: 0, // 长按事件定时器
      pinYinData: [
        {
          A: [],
        },
        {
          B: [],
        },
        {
          C: [],
        },
        {
          D: [],
        },
        {
          E: [],
        },
        {
          F: [],
        },
        {
          G: [],
        },
        {
          H: [],
        },
        {
          I: [],
        },
        {
          J: [],
        },
        {
          K: [],
        },
        {
          L: [],
        },
        {
          M: [],
        },
        {
          N: [],
        },
        {
          O: [],
        },
        {
          P: [],
        },
        {
          Q: [],
        },
        {
          R: [],
        },
        {
          S: [],
        },
        {
          T: [],
        },
        {
          U: [],
        },
        {
          V: [],
        },
        {
          W: [],
        },
        {
          X: [],
        },
        {
          Y: [],
        },
        {
          Z: [],
        },
        {
          TS: [],
        },
      ],
      docmHeight: document.documentElement.clientHeight, //默认屏幕高度
      showHeight: document.documentElement.clientHeight, //实时屏幕高度
      hideshow: true, //显示或者隐藏footer
      indexList: [],
      page: 0,
      position: ['1001', '2001', '3001', '4001', '5001', '5002', '5003'],
      userInfo: {
        positionId: 0,
      },
    };
  },
  created() {
    this.init();
    // this.getCustomersList()
  },
  mounted() {
    // window.onresize监听页面高度的变化
    window.onresize = () => {
      return (() => {
        this.showHeight = document.body.clientHeight;
      })();
    };
  },
  methods: {
    init() {
      authInfo().then((res) => {
        this.userInfo['positionId'] = res.data.data.positionId || 0;
        this.userLevel = res.data.data.userLevel || 0;
      });
    },
    navigationTo: function (id) {
      this.$router.push({
        path: `/user/business/classification/${id}`,
      });
    },
    followtionTo(id) {
      this.$router.push({
        path: `/user/business/followfication/${id}`,
      });
    },
    cesNavigationTo: function (id) {
      this.$router.push({
        // path: `/user/validation/customers/${id}`
        path: '/user/validation/customers',
      });
    },
    getIndex: function (params) {
      let that = this;
      // object.leys()返回数组元素属性的的数组 如：返回数组对应的下标
      let first_letter = Object.keys(params)[0];
      // console.log(first_letter);
      if (params[first_letter].length > 0) {
        return first_letter;
      } else {
        return '';
      }
    },
    getDataList: function (el, index) {
      let first_letter = Object.keys(el)[0];
      // console.log(el[first_letter]);
      return el[first_letter];
    },
    getpinYinData() {
      let that = this;
      const arr = this.list;
      for (let index = 0; index < this.list.length; index++) {
        let data_item = this.list[index];

        let itemPInYinArr = pinYin(data_item.name, {
          style: pinYin.STYLE_FIRST_LETTER,
          heteronym: true,
        });
        let panduan = new Array(...itemPInYinArr[0][0].substring(0, 1));

        panduan.forEach((item) => {
          if (item == 'a' || item == 'A') {
            that.pinYinData[0].A.push(data_item);
          }
          if (item == 'b' || item == 'B') {
            that.pinYinData[1].B.push(data_item);
          }
          if (item == 'c' || item == 'C') {
            that.pinYinData[2].C.push(data_item);
          }
          if (item == 'd' || item == 'D') {
            that.pinYinData[3].D.push(data_item);
          }
          if (item == 'e' || item == 'E') {
            that.pinYinData[4].E.push(data_item);
          }
          if (item == 'f' || item == 'F') {
            that.pinYinData[5].F.push(data_item);
          }
          if (item == 'g' || item == 'G') {
            that.pinYinData[6].G.push(data_item);
          }
          if (item == 'h' || item == 'H') {
            that.pinYinData[7].H.push(data_item);
          }
          if (item == 'i' || item == 'I') {
            that.pinYinData[8].I.push(data_item);
          }
          if (item == 'j' || item == 'J') {
            that.pinYinData[9].J.push(data_item);
          }
          if (item == 'k' || item == 'K') {
            that.pinYinData[10].K.push(data_item);
          }
          if (item == 'l' || item == 'L') {
            that.pinYinData[11].L.push(data_item);
          }
          if (item == 'm' || item == 'M') {
            that.pinYinData[12].M.push(data_item);
          }
          if (item == 'n' || item == 'N') {
            that.pinYinData[13].N.push(data_item);
          }
          if (item == 'o' || item == 'O') {
            that.pinYinData[14].O.push(data_item);
          }
          if (item == 'p' || item == 'P') {
            that.pinYinData[15].P.push(data_item);
          }
          if (item == 'q' || item == 'Q') {
            that.pinYinData[16].Q.push(data_item);
          }
          if (item == 'r' || item == 'R') {
            that.pinYinData[17].R.push(data_item);
          }
          if (item == 's' || item == 'S') {
            that.pinYinData[18].S.push(data_item);
          }
          if (item == 't' || item == 'T') {
            that.pinYinData[19].T.push(data_item);
          }
          if (item == 'u' || item == 'U') {
            that.pinYinData[20].U.push(data_item);
          }
          if (item == 'v' || item == 'V') {
            that.pinYinData[21].V.push(data_item);
          }
          if (item == 'w' || item == 'W') {
            that.pinYinData[22].W.push(data_item);
          }
          if (item == 'x' || item == 'X') {
            that.pinYinData[23].X.push(data_item);
          }
          if (item == 'y' || item == 'Y') {
            that.pinYinData[24].Y.push(data_item);
          }
          if (item == 'z' || item == 'Z') {
            that.pinYinData[25].Z.push(data_item);
          }
          let zimu = new RegExp(/[A-Za-z]/);
          if (!zimu.test(item)) {
            that.pinYinData[26].TS.push(data_item);
          }
        });
      }
    },
    // 跳转路径
    handlePushDetails(userId, item) {
      this.$router.push(`/user/business/customer/detail/${userId}`);
    },
    // callMobile(mobile) {
    //   window.location.href = 'tel:' + mobile;
    // },
    gtouchstart(item) {
      this.isTop = item.isTop;
      item.isTop = 2;
      // 开始触摸
      this.timeOutEvent = setTimeout(() => {
        // 长按1秒
        this.timeOutEvent = 0;
        this.showTopConfirm(item.id, this.isTop);
      }, 1000);
    },
    gtouchend(item) {
      if (this.isTop != 2) {
        item.isTop = this.isTop;
      }
      clearTimeout(this.timeOutEvent);
      this.timeOutEvent = 0;
    },
    showTopConfirm(userId, isTop) {
      let msg = '您确定置顶吗';
      let title = '设置置顶';
      if (isTop) {
        title = '取消置顶';
        msg = '您确定取消置顶吗';
      }
      Dialog.confirm({
        title: title,
        message: msg,
        closeOnClickOverlay: true,
      })
        .then(() => {
          this.setIsTop(userId, !isTop);
        })
        .catch(() => {
          // on cancel
          item.isTop = this.isTop;
        });
    },
    addClass(isTop) {
      if (isTop == 0) {
        return 'top-back';
      } else if (isTop == 1) {
        return 'not-top';
      } else {
        return 'mr-fk';
      }
    },
    // toCheckUser() {
    //   let url = '/verify/user';
    //   this.$router.push({ path: url });
    // },
    // toCheckCustomer: function(item) {
    //   if (item.status != 0) {
    //     this.callMobile(item.mobile);
    //   } else {
    //     this.toCheckUser();
    //   }
    // },
    onSearch() {
      this.getCustomersList();
    },

    // 懒加载实现
    onLoad() {
      if (this.memberLevel == 1 && this.userLevel == 0) {
        this.page++;
        customersList_invite({
          searchValue: this.searchvalue,
          limit: 10,
          page: this.page,
          userId: Number(this.userId),
        }).then((res) => {
          // Toast('第' + this.page + '页');
          this.loading = false;
          this.finished = false;
          this.list.push(...res.data.data.list);
          this.total = res.data.data.total;
          let orlengt = this.list.length;
          if (
            orlengt >= res.data.data.totalorlengt ||
            res.data.data.total == 0
          ) {
            Toast('加载完毕');
            this.loading = false;
            this.finished = true;
          }
          // console.log(res.data.data.total);
          this.pinYinData.forEach((item) => {
            item[Object.keys(item)[0]] = [];
          });
          this.getpinYinData();
        });
      } else {
        this.page++,
          customersList({
            searchValue: this.searchvalue,
            limit: 10,
            page: this.page,
            userId: Number(this.userId),
          }).then((res) => {
            // Toast('第' + this.page + '页');
            this.loading = false;
            this.finished = false;
            this.list.push(...res.data.data.list);
            this.total = res.data.data.total;
            let orlengt = this.list.length;
            if (orlengt >= res.data.data.total || res.data.data.total == 0) {
              Toast('加载完毕');
              this.loading = false;
              this.finished = true;
            }
            // console.log(res.data.data.total);
            this.pinYinData.forEach((item) => {
              item[Object.keys(item)[0]] = [];
            });
            this.getpinYinData();
          });
      }
    },
    getCustomersList() {
      if (this.memberLevel == 1 && this.userLevel == 0) {
        this.page++;
        customersList_invite({
          searchValue: this.searchvalue,
          limit: 1,
          page: this.page,
          userId: Number(this.userId),
        }).then((res) => {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
          this.pinYinData.forEach((item) => {
            item[Object.keys(item)[0]] = [];
          });
          this.getpinYinData();
        });
      } else {
        this.page++;
        customersList({
          searchValue: this.searchvalue,
          limit: 10,
          page: this.page,
          userId: Number(this.userId),
        }).then((res) => {
          // console.log(res.data.data.list);
          this.list = res.data.data.list;
          this.total = res.data.data.total;

          this.pinYinData.forEach((item) => {
            item[Object.keys(item)[0]] = [];
          });
          this.getpinYinData();
        });
      }
    },
    setIsTop(user_id, is_top) {
      setTop({
        userId: user_id,
        isTop: is_top,
      })
        .then((res) => {
          Toast.success('操作成功！');
          this.getCustomersList();
        })
        .catch((error) => {
          this.$toast.fail(error.data.errmsg);
        });
    },
  },

  components: {
    [Search.name]: Search,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [Image.name]: Image,
    [Image.Toast]: Toast,
    [IndexBar.name]: IndexBar,
    [IndexAnchor.name]: IndexAnchor,
    [Dialog.Component.name]: Dialog.Component,
  },
};
</script>
<style lang="scss" scoped>
/deep/ .van-search {
  padding-left: 0;
}

.ss {
  width: 100%;
  /* 占了百分百-flex:0的占位 */
  flex: 1;

  /* background: #143541; */
  font-size: 40px;
  text-align: left;
}

.num_footer {
  /* 占位用 */
  flex: 0;
  margin: 14px auto;
  /* background: #555555; */
  margin-bottom: 10px;
  font-size: 16px;
  color: rgba(157, 155, 155, 1);
}

.view-router {
  padding-bottom: 15px;
}

.icon_box {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 50px;
  height: 50px;
}

// 用户分类模块
.user_classification_box {
  padding: 0 16px;
  // z-index: 11;
  // position: relative;
  // background-color: #fff;

  .van-col {
    display: flex;
    align-items: center;
    height: 66px;
    width: 100%;

    span {
      height: 66px;
      line-height: 66px;
      width: calc(100% - 58px);
      border-bottom: 1px solid rgb(237, 237, 237);
      margin-left: 8px;
      font-size: 16px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

.box_z {
  padding: 0 16px;
}

.box_r {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding-right: 5px;
}

/deep/.van-index-bar__index {
  padding-right: 5px;
  font-size: 13px;
  line-height: 20px;
}

/deep/.van-index-anchor {
  background-color: #f5f6f7;
}

/deep/ .van-field__control {
  height: 30px;
  line-height: 30px;
}

/deep/ .van-field__left-icon .van-icon,
.van-field__right-icon .van-icon {
  height: 30px;
  line-height: 30px;
}

.publish {
  line-height: 30px;
  height: 30px;
  text-align: end;
  background-color: #ee3f00;
  border: 1px solid #ee3f00;
  border-radius: 4px;
  font-size: 12px;
  padding: 0 3px 0 10px;
  // letter-spacing: 5px;
  color: white;
  margin-left: 10px;
  white-space: nowrap;
}

.container {
  /* 因为是遮罩效果所以要fixed */
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  background: #fff;
  /*必须 */
  display: flex;
  /* 必须，规定元素的排列方向 */
  flex-direction: column;
  /* 必须占满屏 */
  height: 100%;
  /* 没有这个就不能滚动了 */
  overflow: auto;
  background-color: white;
  -webkit-touch-callout: none;
  /*系统默认菜单被禁用*/
  -webkit-user-select: none;
  /*webkit浏览器*/
  -khtml-user-select: none;
  /*早期浏览器*/
  -moz-user-select: none;
  /*火狐*/
  -ms-user-select: none;
  /*IE10*/
  user-select: none;
  // padding: 0px 16px;
}

input {
  -webkit-user-select: auto;
}

.top-time {
  color: hsl(266, 60%, 60%);
  text-align: end;
  padding-right: 14px;
}

.top-back {
  background-color: rgb(99, 64, 64);
}

.not-top {
  background-color: #f5f4f4;
}

.mr-fk {
  background-color: #bbbbbb;
}

.user-add {
  text-align: center;
  color: $orange;
  margin-top: 18px;
}

.item {
  display: flex;
  align-items: center;
  height: 66px;
}

.van-search {
  padding: 10px 0px;
}

.van-search .van-cell {
  padding: 3px 8px 3px 0;
}

.img-radius {
  border: 0;
  border-radius: 7px;
  vertical-align: middle;
}
</style>
